<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <LeTodoList />
    </a-card>
    <a-card size="small" :bordered="false" class="box-card marginTop12">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            全部游戏
            <ExclamationCircleOutlined />
          </div>
        </header>
      </template>
      <div class="seach-content">
        <a-row>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">游戏ID</div>
            <a-input
              size="small"
              v-model:value="id"
              allowClear
              placeholder="请输入游戏ID"
              class="search_input"
            />
          </a-col>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">游戏名称</div>
            <a-input
              size="small"
              v-model:value="name"
              allowClear
              type="text"
              placeholder="请输入游戏名称"
              class="search_input"
            />
          </a-col>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">游戏包名</div>
            <a-input
              size="small"
              v-model:value="packName"
              allowClear
              type="text"
              placeholder="请输入游戏包名"
              class="search_input"
            />
          </a-col>
          <a-col :xs="5" :xl="5" class="search_content">
            <div class="search_lable">审核状态</div>
            <a-select
              ref="select"
              allowClear
              class="search_input"
              v-model:value="auditStatus"
              placeholder="请选择审核状态"
              :options="selectTable"
              @change="handleChange"
            ></a-select>
          </a-col>
          <a-col :xs="4" :xl="4" class="search_content">
            <a-button class="search_Button confirm" type="primary" @click="search"
              >确定</a-button
            >
            <a-button
              class="search_Button search_Button_reset button_cancel_hover"
              @click="reset"
              >重置</a-button
            >
          </a-col>
        </a-row>
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :data-source="data"
          @resizeColumn="handleResizeColumn"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped1' : null)
          "
          :locale="localeObj"
        >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
              <span>
                <smile-outlined />
                Name
              </span>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <!-- <template v-if="column.key === 'name'">
              <a>
                {{ record.name }}
              </a>
            </template> -->
            <div v-if="column.key === 'status'" class="geme_status">
              <span v-if="record.status === 1" class="geme_status_gray">待上线</span>
              <span v-else-if="record.status === 3" class="geme_status_color"
                >已上线</span
              >
              <span v-else-if="record.status === 4" class="geme_status_out">已下架</span>
              <span v-else-if="record.status === 2">-</span>
            </div>
            <div v-if="column.key === 'onlineTime'">
              <span v-if="record.onlineTime">{{ record.onlineTime }}</span>
              <span v-else>-</span>
            </div>
            <template v-if="column.key === 'tags'">
              <a-tag v-if="record.status === 1" :bordered="false" color="default"
                >未发布</a-tag
              >
              <a-tag v-else-if="record.status === 3" :bordered="false" color="green"
                >审核完成</a-tag
              >
              <a-tag v-else-if="record.status === 4" :bordered="false" color="error"
                >审核失败</a-tag
              >
              <a-tag v-else-if="record.status === 2" :bordered="false" color="warning"
                >审核中</a-tag
              >
            </template>
            <template v-else-if="column.key === 'action'">
              <span class="action">
                <a-button
                  class="action" 
                  value="small"
                  type="text"
                  @click="doAction('add', record)"
                  >添加安装包</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">还原</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">剩余时间</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  @click="doAction('view', record)"
                  type="text"
                  >查看</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text">失败原因</a-button>
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  @click="doAction('delete', record)"
                  >删除</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  :loading="state.loading"
                  @click="doAction('update', record)"
                  >更新</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  @click="doAction('applyForRemoval', record)"
                  >申请下架</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button size="small" type="text" class="action"
                  >撤回
                  <!-- <down-outlined /> -->
                </a-button>
              </span>
            </template>
          </template>
          <!-- <a-config-provider >
            <template #emptyText>
              <div style="text-align: center">
                <img src="../../assets/images/img-default @2x.png" alt="">
                <p>暂无数据</p>
              </div>
            </template>
          </a-config-provider> -->
        </a-table>
      </div>
    </a-card>
    <a-modal
      v-model:open="applyForRemovalModal"
      class="applyForRemovalModal"
      style="
        /* background: #FFFFFF; */
        padding: 0 25px;
        height: 635px;
        width: 1200px;
        box-shadow: 1px 3 8px 2px rgba(0, 0, 0, 0.08);
        border-radius: 2px 2px 2px 2px;
      "
      title="申请下架"
      @ok="handleOk"
    >
      <p>
        本开放平台支持开发者自行申请下架应用，如应用出现问题，可根据实际情况提交下架申请。
      </p>
      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
        <a-form-item label="下架方式" name="way">
          <a-radio-group v-model:value="formState.way">
            <a-radio value="1">仅下架该版本</a-radio>
            <a-radio value="2">下架该游戏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="原因描述" name="cause">
          <a-textarea
            v-model:value="formState.cause"
            placeholder="请具体描述下架原因（如：①应用不再维护 ②应用更换包名 ③上架版本出现BUG，需暂时下架修复 ④上架版本出现BUG，需回退版本 ⑤其他原因）"
          />
        </a-form-item>
        <a-form-item label="上传截图(格式必须为JPG或PNG)">
          <a-upload
            v-model:fileList="formState.screenshot"
            list-type="picture-card"
            :max-count="1"
          >
            <div v-if="formState.screenshot.length < 1">
              <PlusOutlined
                :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }"
              />
            </div>
          </a-upload>
        </a-form-item>
        <div class="form_tips">
          <i class="tips">
            <!-- <img src="../../assets/icon/icon.png" alt="" class="imgs" /> -->
            <!-- <Icon icon="material-symbols:info" /> -->
            温馨提示</i
          ><br />
          <i>① 提交成功后，游戏自动下架，无需审核等待。</i><br />
          <i
            >②
            若线上版本存在短期无法解决的严重BUG，但旧版本可正常使用，建议申请[仅下架该版本]，系统将自动回退到旧版本，确保新用户能下载到可用的版本。同时，建议开发者及时更新，保证老用户不再因为BUG影响正常使用。
          </i>
        </div>
      </a-form>
      <template #footer>
        <a-form-item style="text-align: center">
          <a-button
            htmlType="submit"
            style="
              margin-right: 16px;
              background-color: rgba(76, 200, 126, 1);
              border-radius: 2px 2px 2px 2px;
            "
            type="primary"
            @click="handleOk"
            >提 交</a-button
          >
          <a-button
            class="button_cancel_hover"
            style="margin-left: 8px; border-radius: 2px 2px 2px 2px"
            @click="handleCancel"
            >取 消</a-button
          >
        </a-form-item>
      </template>
    </a-modal>
  </div>
  <DialogEditModal ref="dialogModal" :name="`详情`" />
</template>

<script setup>
import { reactive, ref, toRaw, h } from "vue";
import LeTodoList from "@/components/tolist/index.vue";
import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, Empty } from "ant-design-vue";
import { gameaddby3399 } from "@/api/request";
import DialogEditModal from "./DiaoEditMoal.vue";

// const expand = ref(false);

const currentData = ref({});
const dialogModal = ref(null);
// const localeObj =ref('')
// const localeObj= {
//   emptyText: h(Empty, {
//     description: '请您修改订阅信息，来精准匹配您的项目',
//     // image: Empty.PRESENTED_IMAGE_SIMPLE,
//     imageStyle: { height: '60px' },
//   }),
// }
const localeObj = {
  emptyText: h(Empty, {
    description: "暂无数据",
    // image: Empty.PRESENTED_IMAGE_SIMPLE,
    imageStyle: { height: "60px" },
  }),
};

// search
const id = ref("");
const name = ref("");
const packName = ref("");
const auditStatus = ref([]);
const selectTable = ref([
  {
    value: "jack",
    label: "Jack",
  },
  {
    value: "lucy",
    label: "Lucy",
  },
  {
    value: "disabled",
    label: "Disabled",
    disabled: true,
  },
  {
    value: "yiminghe",
    label: "Yiminghe",
  },
]);
const search = () => {
  console.log(id.value, name.value, packName.value, auditStatus.value, 11111);
  const params = {
    id: 12,
    name: "周三",
    packName: "lisi",
    auditStatus: [1, 2],
  };
  gameaddby3399(params).then((res) => {
    if (res.code === 1) {
      console.log('res: ', res);
      console.log(11111, "111");
    } else {
      console.log("error", "error");
    }
  });
};
const reset = () => {
  (id.value = ""), (name.value = ""), (packName.value = ""), (auditStatus.value = []);
};
const handleChange = (value) => {
  console.log(`selected ${value}`);
  search();
};
// 表格
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
    status: 1,
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
    status: 2,
    onlineTime: "2023/07/10 08:00:00",
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
    status: 3,
  },
  {
    key: "4",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
    status: 4,
  },
  {
    key: "5",
    name: "Joe Black",
    age: 36,
    address: "Sidney No. 2 Lake Park",
    tags: ["cool", "teacher"],
    status: 6,
  },
];
const columns = ref([
  {
    title: "序号",
    dataIndex: "key",
    render: (value, record, index) => {
      return index + 1; // 使用行号
    },
    width: 80,
  },
  {
    dataIndex: "name",
    key: "name",
    resizable: true,
    width: 150,
    align: "center",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: "center",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
    align: "center",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    align: "center",
  },
  {
    title: "上线时间",
    key: "onlineTime",
    dataIndex: "onlineTime",
    align: "center",
    width: 180,
  },
  {
    title: "游戏状态",
    key: "status",
    dataIndex: "status",
    align: "center",
    width: 100,
  },
  {
    title: "Action",
    key: "action",
    align: "center",
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const state = reactive({
  // selectedRowKeys: [],
  // Check here to configure the default column
  loading: false,
});
const applyForRemovalModal = ref(false);
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", formState, toRaw(formState));
      applyForRemovalModal.value = false;
      // formRef.value.resetFields();
      // formState.screenshot =[]
    })
    .catch((error) => {
      console.log("error", error);
    });
  console.log(111, "addM");
};
const handleCancel = () => {
  applyForRemovalModal.value = false;
  formRef.value.resetFields();
};
const doAction = (e, record) => {
  console.log(e, "e");
  if (e === "applyForRemoval") {
    console.log(1111, "applyForRemoval");
    applyForRemovalModal.value = true;
    // formRef.value.resetFields();
    // formState.screenshot =[]
  } else if (e === "update") {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      // state.selectedRowKeys = [];
    }, 1000);
  } else if (e === "delete") {
    Modal.confirm({
      title: "确定要删除此条数据?",
      icon: createVNode(ExclamationCircleOutlined),
      content: `Some descriptions + ${record.age}`,
      okText: "Yes",
      okType: "danger",
      cancelText: "No",
      onOk() {
        console.log("OK", record);
        // formRef.value
        // .validate()
        // .then(() => {
        //   console.log('values', formState, toRaw(formState));
        //   applyForRemovalModal.value = false
        // })
        // .catch(error => {
        //   console.log('error', error);
        // });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  } else if (e == "view") {
    console.log("e: ", e);
    console.log("record: ", record);
    currentData.value = record; // 示例数据
    dialogModal.value.open("detail", record);
  }
};
// modal 下架
const formRef = ref();
const formState = reactive({
  way: "",
  cause: "",
  screenshot: [],
});
const rules = {
  way: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  cause: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
};

// 分页
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
